<template>
    <div class="modal fade" id="cusEditCommission" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<!-- <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> -->
            	<h4 class="modal-title" id="myModalLabel"> 编辑佣金【{{editCommission.commissionType == 0 ? '开发商佣金': '合作机构佣金'}}】</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
					<div class="form-group">
						<label class="col-md-4 col-sm-2 control-label">佣金总额：</label>
						<div class="col-md-8 col-sm-10">
							<input type="text" class="form-control" placeholder="请填写佣金总额" v-model="params.commission">
						</div>
					</div>
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">备注：</label>
	                  <div class="col-sm-8">
	                    <textarea rows="5" class="form-control" v-model="params.remark" placeholder="请填写备注"></textarea>
	                  </div>
	                </div>

					<div class="form-group">
	                  <label for="" class="col-sm-4 control-label">上传图片：</label>
	                  <div class="col-sm-8">
	                    <ul class="clearfix remindUpload">
                                <li class="col-sm-4 file-image" v-for="(image,index) in imgesList" :key="index">
                                    <img  :src="image.url" width="100%" height="80px" 
                                        v-if="image.fileType.toLowerCase()=='png'
                                         || image.fileType.toLowerCase()=='jpg' 
                                         || image.fileType.toLowerCase()=='jpeg' 
                                         || image.fileType.toLowerCase()=='gif'"/>
                                    <div width="100%" height="80px" class="pic-bg-fj" v-else></div>
                                </li>
                                <li class="col-sm-4 file-image" v-if="imgFile">
                                    <div class="file-upload">
                                        <input ref="imageUpload" type="file" class="file-btn" style="width:100%;" name="files" id="files" @change="onFileChange" >
                                        <i class="layui-icon"></i>
                                    </div>
                                </li>
                            </ul>
	                  </div>
	                </div>
	            </div>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="saveCommission">确定</button>
				<button type="button" class="btn btn-default" v-show="btnShow" @click="canel">取消</button>
          	</div>
        </div>
      </div>
    </div>
</template>
<style scoped>
	.remindUpload li{margin-top: 8px;}
    .remindUpload .file-upload{width: 100%;height: 80px;padding:10px;}
    
</style>
<script>
	export default{
		//接收父组件的绑定值
		props: {
            editCommission: {
				type: Object,
                default: () => {
					return {
                        commission: 0,
					    remark: ''
                    }
				} 
			}
        },
		data() {
			return {
				//机构信息对象
				params: {
                    commissionType: '',
                    id: 0,
                    reportId:'',
                    saveType:'',
                    commission: 0,
					remark: ''
				},
				btnShow: true,
				imgesList:[],
                followType:'',
                title:'开发商佣金',
                editVisitTime:true,
                imgFile:true
			}
        },
       watch: {
			editCommission(val) {
                console.log(val)
            },
		},
		methods: {
            saveCommission: function() {
                const _self = this;
                console.log(_self);
                // if (!_self.params.remark) {
                //     layer.msg('请填写跟进描述！');
                //     return;
                // }
                const url = this.utilHelper.apiUrl+'/api/cp/editReportCommission';
                const body = {};
                _self.params.commissionType = this.editCommission.commissionType;
                _self.params.id = this.editCommission.commissionId;
                _self.params.reportId = this.editCommission.reportId;
                _self.params.saveType = this.editCommission.saveType;
				body.params = _self.params;
                body.params.imageList=this.imgesList;
                _self.$http.post(url,body).then((response) =>{
                    const res = response.body.resData;
                    console.log(response.body.resData);
                    if(res.result == '1') {
                        layer.msg("编辑成功");
                        this.canel()
                        _self.params.commission = 0
                        _self.params.remark = ''
                        _self.$emit('saveEditCommissionReturn');
                    }else {
                        layer.msg(res.resultMsg);
                    }
                },(response)=>{
                    layer.msg("编辑失败");
                });
			},
			canel:function(){
                $('#cusEditCommission').modal('hide');
                this.imgesList=[];
            },
            onFileChange:function (e) {
                layer.load(0, {shade: false}); //弹出加载层
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                var size = files[0].size;
                if(size > 3145728){
                    layer.msg("图片大小不能超过3M");
                    layer.closeAll('loading'); //关闭加载层
                    return;
                }
                this.createImage(files[0]);
            },
            createImage(file) {
                var _self = this;
                var reader = new FileReader();
                reader.readAsDataURL(file);
                let indexNum = file.name.lastIndexOf(".")+1;
                reader.onload = e =>{
                     //上传附件
                    let msg=e.target.result;
                    layer.load(0, {
                        shade: false
                    }); //弹出加载层
                    var myForm = new FormData(); //创建formdata
                    var blobBin = _self.dataURLtoBlob(msg); //base64转换blob
                    myForm.append("blobObject", blobBin); //想formData添加blob数据
                    myForm.append("suffix", file.name.substr(file.name.lastIndexOf("."))); //添加文件后缀
                    var url = _self.utilHelper.apiUrl + '/api/uploadBase64ToQiNiu';
                    _self.$http.post(url, myForm).then((response) => {
                        
                        layer.closeAll('loading'); //关闭加载层
                        var data = response.body;
                        if(data.result == "1") {
                            _self.imgesList.push({url:data.resData.imgName,fileType:file.name.substr(indexNum),qiNiu:true})
                            if(this.imgesList.length>4){
                                this.imgFile = false
                                layer.msg("最多上传5张图片");
                            }
                        } else {
                            layer.msg("图片上传失败，请重试");
                        }
                    }, (response) => {
                        layer.msg(response);
                    });
                };
                
            },
            //将base64转换blob
			dataURLtoBlob(dataUrl) {
				var arr = dataUrl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while(n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
			init(){
                this.params.remark='';
                
			}
		}
	}
	
</script>